<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>云课堂渲染</title>
    <link rel="stylesheet" href="./index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>

    <div id='app'>
        <!-- 免费课程 -->
        <fcourse :type="'free'" :num="10">
            <div class="boxFive">
                <div class="title">
                    免费课程
                </div>
            </div>
        </fcourse>

        <fcourse :type="'boutique'" :num="5">
            <div class="title">
                精品课程
            </div>
        </fcourse>

        <!-- 折扣课程 -->
        <fcourse :type="'discount'" :num="5">
            <div class="title">
                折扣课程
            </div>
        </fcourse>
    </div>

    <!-- 课程项 -->
    <template id="course">
        <div class="boxSix">
            <div class="boxSixOne" v-for="item in list">
                <div class="boxSix1">
                    <div><img :src="item.coverFileUrl"></div>
                    <p>{{item.courseTitle}}</p>
                    <p>共{{item.subSectionNum}}节课|{{item.participationsCount}}人报名</p>
                    <p>免费</p>
                </div>

            </div>
        </div>
    </template>

    <!-- 父课程 -->
    <template id="fcourse">
        <div>
            <div>
                <slot></slot>
            </div>
            <div :class="num==10?'boxSix':'boxSix_vue_two'">
                <course :type="type" :num="num"></course>
            </div>

        </div>
    </template>

    <script>
        const fcourse = {
            template: '#fcourse',
            props: {
                type: String,
                num: Number,
            }
        }
        const course = {
            template: "#course",
            data() {
                return {
                    title: "",
                    list: "",
                }
            },
            props: {
                type: String,
                num: Number,
            },
            created() {
                let params = new URLSearchParams()
                params.append('type', this.type)
                params.append('pageNum', 1)
                params.append('pageSize', this.num)
                axios.post('http://59.111.104.104:8086/weChat/applet/course/list/type',
                    params).then(res => {
                        console.log(res);
                        console.log(this.type)
                        this.list = res.data.rows
                    })


            }
        }
        Vue.component('course', course)
        Vue.component('fcourse', fcourse)
        const vm = new Vue({
            el: '#app',
            data: {},


        })
    </script>
</body>

</html>